<template>
  <view class="pay-success">
    <uni-icons type="checkbox-filled" size="80" color="#1aad19"></uni-icons>
    <view class="title">支付成功</view>
    <view class="price">{{ orderInfo?.payAmount }}</view>
    <view class="pay-no">预约编号: {{ orderInfo?.orderNo }}</view>
    <view class="back-index" @click="handleBackIndex">返回首页</view>
    <view class="order-detail" @click="handleToOrderDetail">订单详情</view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { getOrderInfoByIdApi } from "@/api/OrderPay";
import { useOrderInfoStore } from "@/stores/order";
//获取本地存储的订单id
const orderId = uni.getStorageSync("orderId");
console.log("支付成功页面获取到的订单id:", orderId);
//定义后端传递的订单数数据
const orderInfo = ref<OrderDetailResponse>();
//定义订单存储函数对象
const orderInfoStore = useOrderInfoStore();

//函数 点击订单详情跳转到订单详情页面
const handleToOrderDetail = () => {
  uni.navigateTo({ url: `/pages/OrderDetail/index?orderId=${orderId}` });
};

//函数 点击返回首页
const handleBackIndex = () => {
  //返回首页之前删除本地存储的订单id
  uni.removeStorageSync("orderId");

  uni.reLaunch({ url: "/pages/index/index" });
};

//页面加载时像后端发送请求 获取订单详情数据
//支付成功后存储的订单id
onMounted(async () => {
  const res = await getOrderInfoByIdApi(orderId);
  orderInfo.value = res.data;
  //将订单数据存储到pinia当中
  orderInfoStore.setOrderInfo(res.data);
  console.log("订单详情数据:", orderInfoStore.getOrderInfo());
});
</script>

<style lang="scss" scoped>
.pay-success {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  gap: 20rpx;
  margin-top: 20%;
  width: 100%;
  .title {
    font-size: 60rpx;
    color: #333;
    font-weight: 600;
  }
  .price {
    font-size: 45rpx;
    color: #333;
    font-weight: 450;
  }
  .pay-no {
    font-size: 32rpx;
    color: #666;
  }
  .back-index {
    width: 70%;
    background-color: #1d6fff;
    color: aliceblue;
    height: 70rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10rpx;
    margin-top: 100rpx;
    margin-bottom: 30rpx;
  }
  .order-detail {
    width: 70%;
    background-color: #cecece;
    color: aliceblue;
    height: 70rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10rpx;
  }
}
</style>
